<template>
  <div class="wrapper">
    <el-dialog
      title="选择运单"
      append-to-body
      :visible.sync="visible"
      :before-close="handleClickClose"
      width="800px"
    >
      <div class="orderHeader" style="margin: 5px 0px 0px 0px">
        <div class="orderSearch">
          <el-form
            ref="form"
            :model="searchParams"
            :inline="true"
            style="float: left"
          >
            <el-form-item label="运单号" size="mini">
              <el-input
                v-model="searchParams.waybill_no"
                style="width: 200px !important"
                clearable
                placeholder="请填写运单号进行搜索"
              />
            </el-form-item>
            <el-form-item size="mini">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
                >查询</el-button
              >
              <el-button
                type="primary"
                plain
                icon="el-icon-refresh"
                @click="handleReset"
                >重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="actions">
        <div class="left"></div>
        <div class="right">
          <el-pagination
            :current-page="paginations.pageIndex"
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            :pager-count="5"
            :layout="paginations.layout"
            :total="paginations.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :max-height="300"
        stripe
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        :row-key="(item) => item.id"
        @selection-change="handleSelectionChange"
        @select="selectWaybill"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55">
        </el-table-column>
        <el-table-column
          prop="waybill_no"
          label="运单号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="waybill_product_type_name"
          label="承运类型"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="from_network_name"
          label="出发网点"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="to_network_name"
          label="目的网点"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="from_area_name"
          label="出发区域"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="to_area_name"
          label="目的区域"
          width="180"
        ></el-table-column>
      </el-table>
      <div style="text-align: right; padding-top: 10px">
        <el-button @click="handleClickClose">取消</el-button>
        <el-button type="primary" @click="handleClickOk">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWaybillListFn } from "@/api/waybill";
export default {
  name: "waybillCheck",
  components: {},
  props: ["visible", "checkedId"],
  data() {
    return {
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      searchParams: {},
      tableData: [],
      checkedWaybillIds: [],
    };
  },
  mounted() {
    this.getWaybillList();
  },
  methods: {
    selectWaybill(selection, row) {
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    handleClickOk() {
      const waybillData = this.checkedWaybillIds[0];

      const {
        id,
        waybill_no,
        customer_id,
        customer_id_name,
        customer_area_id,
        customer_area_id_name,
        goods_name,
        package_type,
        goods_thermosphere_name,
      } = waybillData;
      const goods_number = (
        waybillData.goods.map((item) => item.number) || []
      ).join(",");
      const goods_value = (
        waybillData.goods.map((item) => item.declared_value) || []
      ).join(",");
      const newData = {
        waybill_id: id,
        waybill_no: waybill_no,
        customer_id: customer_id,
        customer_area_id: customer_area_id + "",
        goods_number: goods_number,
        goods_category: goods_name,
        package_type,
        temperature: goods_thermosphere_name,
        goods_value,
      };

      this.$emit("finish", newData);
      this.$emit("close");
    },
    // 已经绑定的温度计做回显
    initCheck() {
      this.$nextTick(() => {
        const item = this.tableData.find((t) => t.id === this.checkedId);
        if (item) {
          this.$refs.multipleTable.toggleRowSelection(item, true);
        }
      });
    },
    beforeClose() {
      this.$emit("close");
    },
    handleClickClose() {
      this.$emit("close");
    },
    handleSelectionChange(checked) {
      this.checkedWaybillIds = checked;
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getWaybillList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getWaybillList();
    },
    handleSearch() {
      this.paginations.pageIndex = 1;
      this.getWaybillList();
    },
    handleReset() {
      this.searchParams = {};
      this.paginations.pageIndex = 1;
      this.getWaybillList();
    },
    getWaybillList() {
      getWaybillListFn({
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams,
      }).then((res) => {
        this.tableData = res.data.data || [];
        this.paginations.total = res.data.total;
        this.initCheck();
        // checkedId
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
}

.actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background-color: #fff;
}

.orderHeader {
  margin-top: 5px;
  background-color: #fff;

  .orderSearch {
    form {
      ::v-deep .el-form-item__label {
        font-size: 12px;
      }

      .el-textarea {
        width: 135px;
      }
    }
  }
}
</style>